<template>
	<view>
		<view class="tab-layout">
			<u-tabs-swiper ref="uTabs" :list="tabs" :current="current" @change="tabsChange" :is-scroll="true" />
		</view>
		<u-empty margin-top="300" v-if="showNews.length == 0" text="亲,暂无信息!" mode="news" />
		<view class="cell-layout" v-for="(item,tag) of showNews" :key="tag">
			<view class="title-layout">{{item.title}}</view>
			<view class="img-layout">
				<image class="img-item" :src="item.thumbnail_pic_s" mode="aspectFill" />
				<image class="img-item" :src="item.thumbnail_pic_s02" mode="aspectFill" />
				<image class="img-item" :src="item.thumbnail_pic_s03" mode="aspectFill" />
				<button open-type="share" type="default" style="font-size: 28rpx;color: #757575; border: 2rpx solid #FFFFFF;">分享</button>
			</view>
			<view class="info-layout">{{item.author_name}} {{item.date}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				tabs: [{
					'name': '推荐',
					'key': 'top'
				}, {
					'name': '国内',
					'key': 'guonei'
				}, {
					'name': '娱乐',
					'key': 'yule'
				}, {
					'name': '军事',
					'key': 'junshi'
				}, {
					'name': '科技',
					'key': 'keji'
				}, {
					'name': '国际',
					'key': 'guoji'
				}, {
					'name': '社会',
					'key': 'shehui'
				}, {
					'name': '体育',
					'key': 'tiyu'
				}, {
					'name': '财经',
					'key': 'caijing'
				}, {
					'name': '时尚',
					'key': 'shishang'
				}],
				allData: [
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[]
				],
				showNews: []
			}
		},
		onShareAppMessage(res) {
			console.log("res====:" + JSON.stringify(res))
			let tDic = this.tabs[this.current]
			return {
				title: "亲，快来查看更多" + tDic.name + "新闻",
				path: "/pages/news/news"
			};
		},
		onLoad() {
			this.showNews = this.allData[this.current]
			if (this.showNews.length == 0) {
				this.loadNewsList()
			}
		},
		methods: {
			tabsChange(index) {
				this.current = index
				this.showNews = this.allData[this.current]

				if (this.showNews.length == 0) {
					this.loadNewsList()
				}
			},
			loadNewsList() {
				uni.showLoading({
					title: '加载中...'
				})
				
				var weakThis = this
				let typeKey = this.tabs[this.current].key
				
				uni.request({
					url: 'https://v.juhe.cn/toutiao/index?type=' + typeKey + '&key=0b590d37c004be3ee1590d86d9eed1d2',
					method: 'POST',
					success(res) {
						uni.hideLoading()
						if (res.data.error_code == 0) {
							// author_name: "会火"
							// category: "头条"
							// date: "2020-12-04 13:44"
							// thumbnail_pic_s: "https://08imgmini.eastday.com/mobile/20201204/20201204134409_4c1ff2d403a96f909c74f0b3456822ed_1_mwpm_03200403.jpg"
							// thumbnail_pic_s02: "http://08imgmini.eastday.com/mobile/20201204/20201204134409_4c1ff2d403a96f909c74f0b3456822ed_4_mwpm_03200403.jpg"
							// thumbnail_pic_s03: "http://08imgmini.eastday.com/mobile/20201204/20201204134409_4c1ff2d403a96f909c74f0b3456822ed_2_mwpm_03200403.jpg"
							// title: "伊能静又曝公主病？上洗手间都要避开老公，大胆言论吓坏黄圣依"
							// uniquekey: "9360b34afa9cb85649be9d138724c96a"
							// url: "https://mini.eastday.com/mobile/201204134409490.html"
							weakThis.allData[weakThis.current] = res.data.result.data
							weakThis.showNews = weakThis.allData[weakThis.current]
						}
					},
					fail() {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tab-layout {
		background-color: #FFFFFF;
		padding: 0rpx 20rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.cell-layout {
		flex-direction: column;
		display: flex;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #e5e5e5;

		.title-layout {
			flex: 1;
			font-size: 30rpx;
			color: #1b1b1b;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		.img-layout {
			flex-direction: row;
			flex: 1;
			display: flex;
			margin-top: 30rpx;

			.img-item {
				width: 35%;
				height: 150rpx;
				margin: 0rpx 10rpx;
				border-radius: 4;
			}
		}

		.info-layout {
			display: flex;
			flex-direction: row;
			font-size: 24rpx;
			color: #757575;
			margin-top: 20rpx;
		}
	}
</style>
